<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="scroll-container">
				 <view class="navbar">
				     <view class="nav-item" v-for="(item, index) in navItems" :key="index" @click="fetchClassesForTags(item.id)">
				         {{ item.subject }}
				     </view>
				 </view>
		</view>

		<!-- 搜索框 -->
		<view class="search-bar">
			<input type="text" placeholder="请输入内容" v-model="searchQuery" />
			<button @click="search(searchQuery)" class="search-button">搜索</button>
		</view>

		<view style="display: flex; justify-content: center; align-items: center; background-color: #fff; padding: 20px;margin: 5px 0px 0px 0px; border-radius: 10px;">
		  <view style="font-size: 32px; color: black; font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);">
		    已开课程
		  </view>
		</view>

		<!-- 课程列表 -->
		<view class="container">
			<!-- 课程列表 -->
			<view class="course-list">
				<view class="course-item" v-for="(item, index) in courses" :key="index">
					<view class="course-image">
						<!-- <image :src="item.image" mode="aspectFit"></image> -->
						<image src="../../static/touxiang.jpg"></image>
					</view>
					<view class="course-info" @click="handleToMessage">
						<view class="course-details">
							<text class="course-name">{{ item.classesName }}</text>
							<br />
							<text class="teacher-name">{{ item.classes.tname }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<!--   <view class="footer-nav">
      <view class="footer-item" v-for="(item, index) in footerItems" :key="index">
        {{ item }}
      </view>
    </view> -->
	</view>
</template>

<script>
	import {
		tagsList
	} from '../../api/tags/tags';
	import {
		classesINGList,
		classesListForTags,
		searchText
	} from '../../api/classes/classes';

	export default {
		data() {
			return {
				searchQuery: '',
				navItems: [],
				courses: [],
				footerItems: ['首页', '发现', '消息', '我的']
			};
		},
		methods: {
			search(searchQuery){
					console.log(searchQuery);
					searchText(searchQuery).then(res=>{
						console.log(res)
						this.courses=res.data
					})
				},
			    fetchClassesForTags(id) {
			      classesListForTags(id).then(res => {
			        console.log(res);
			        this.courses = res.data; // 假设返回的数据在 res.rows 中
			      });
			    },
			handleToMessage() {
				uni.navigateTo({
					url: "/pages/classes_old/classes_old"
				})
			},
			onLoad() {
				tagsList().then(res => {
					// console.log(res)
					this.navItems = res.rows;
				});
				classesINGList().then(res => {
					console.log("对课程的查询");
					console.log(res)
					// for (var i = 0; i < res.data.length; i++) {
					// 	res.data[i].image=baseUrl+"/common/download?name="+res.data.data[i].image
					// }
					this.courses = res.data;
				})
			},
		}
		// mounted(){
		//  this.onload();
		// }
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.navbar {
	  display: flex;
	  overflow-x: auto; /* 允许水平滚动 */
	  white-space: nowrap; /* 使子元素在一行显示 */
	  padding: 10px 0; /* 上下内边距 */
	  background-color: #fff; /* 浅白色背景 */
	  border-radius: 10px; /* 边缘光滑 */
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
	  justify-content: flex-start; /* 从开始位置对齐 */
	  scroll-snap-type: x mandatory; /* 控制滚动对齐方式 */
	}
	
	.nav-item {
	  display: inline-flex; /* 使子元素并排显示，同时允许垂直居中 */
	  align-items: center; /* 垂直居中 */
	  justify-content: center; /* 水平居中 */
	  padding: 10px 20px; /* 上下左右内边距 */
	  margin-right: 10px; /* 右边距 */
	  cursor: pointer; /* 鼠标悬停时显示指针 */
	  background-color: #f0f0f0; /* 背景颜色 */
	  border-radius: 5px; /* 圆角 */
	  transition: background-color 0.3s; /* 背景颜色变化动画 */
	  scroll-snap-align: start; /* 滚动对齐到最近的标签 */
	  flex-shrink: 0; /* 防止标签缩小 */
	  min-width: 80px; /* 设置最小宽度，防止标签过窄 */
	  max-width: 120px; /* 设置最大宽度，确保标签不会过宽 */
	}
	
	.nav-item:hover {
	  background-color: #e0e0e0; /* 鼠标悬停时的背景颜色 */
	}
	
	.scroll-container {
	  overflow-x: auto;
	  white-space: nowrap;
	}

	.search-bar {
		display: flex;
		justify-content: space-between;
		padding: 10px;
		background-color: #fff;
		/* 浅白色背景 */
		border-radius: 10px;
		/* 边缘光滑 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		margin-top: 10px;
		/* 上边距 */
	}

	.search-bar input {
		flex: 1;
		margin-right: 15px;
	}

	.search-button {
		text-align: center;
		/* 文字居中 */
		line-height: 30px;
		/* 设置行高与按钮高度一致，使文字垂直居中 */
		height: 30px;
		/* 按钮高度 */
		color: white;
		/* 文字颜色 */
		background-color: blue;
		/* 按钮背景颜色 */
		border: none;
		/* 无边框 */
		border-radius: 5px;
		/* 边缘光滑 */
		font-size: 16px;
		/* 文字大小，可以根据需要调整 */
		cursor: pointer;
		/* 鼠标悬停时显示指针 */
		transition: background-color 0.3s;
		/* 背景颜色变化动画 */
	}


	.course-list {
		flex: 1;
		padding: 10px;
		background-color: #fff;
		/* 浅白色背景 */
		border-radius: 10px;
		/* 边缘光滑 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		margin-top: 10px;
		/* 上边距 */
		min-height: 100px;
		/* 设置最小高度 */
	}
	
	.course-item {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		border: 1px solid #ccc;
		margin-bottom: 10px;
		padding: 10px;
		border-radius: 5px;
		/* 边缘光滑 */
		background-color: #f9f9f9;
		/* 浅白色背景 */
	}
	
	.course-image {
		width: 70px;
		/* 增加图片宽度 */
		height: 70px;
		/* 增加图片高度 */
		border-radius: 50%;
		/* 圆形图片 */
		margin-right: 20px;
		/* 增加图片与信息的间距 */
		overflow: hidden;
		/* 确保图片不会超出容器 */
	}
	
	.course-image>image {
		width: 100%;
		height: 100%;
	}
	
	.course-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		/* 垂直排列子元素 */
		justify-content: center;
		/* 垂直居中对齐文本 */
	}
	
	.course-name {
		font-weight: bold;
		/* 加粗课程名称 */
		margin-bottom: 5px;
		/* 课程名称与教师名字的间距 */
	}
	
	.teacher-name {
		color: #666;
		/* 教师名字的颜色 */
	}
	
	.course-price {
		align-self: flex-end;
		/* 价格靠右对齐 */
		margin-left: auto;
		/* 将价格推到容器最右侧 */
	}
	.footer-nav {
		display: flex;
		justify-content: space-around;
		background-color: #e0e0e0;
		padding: 10px;
	}
</style>